<template>
	<view class="page">
		<view class="curved_box">
			<view class="login">
				<view class="text-center">
					<image class="titleImg" src="/static/yzsf.png" mode="widthFix"></image>
					<image class="img" src="/static/tx.png" mode="widthFix"></image>
				</view>
				<form class="form" @submit="formSubmit" @reset="formReset">
					<input class="formItem" name="name" placeholder="输入帐号" />
					<view class="item-line"></view>
					<input class="formItem" password="true" name="password" placeholder="输入密码" />
					<view class="item-line"></view>
					<!-- 提交按钮 -->
					<button class="formItem submit" form-type="submit">验 证</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
import app from '../../appcould.js';
export default {
	data() {
		return {};
	},
	methods: {
		formSubmit(e) {
			let formData = e.detail.value;
			console.log(formData);
			if (!formData.name) {
				uni.showToast({
					title: '请填写姓名！',
					icon: 'none'
				});
			} else if (!formData.password) {
				uni.showToast({
					title: '请填写密码！',
					icon: 'none'
				});
			} else {
				app.callFunction(
					'login_api',
					formData,
					(data, res) => {
						console.log(res);
						if (data.state == 1) {
							uni.showToast({
								title: '登陆成功！'
							});
							new Promise((resolve, reject) => {
								uni.setStorage({
									key: 'user_info',
									data: data.user_info,
									success: ()=>{
										// console.log('已经缓存，userInfo:', user_info);
										resolve('success')
									}
								});
							}).then(e=>{
								
								uni.redirectTo({
									url:'../shome/shome'
								})
								
							})
						} else {
							uni.showToast({
								title: '登陆失败！' + data.msg,
								icon: 'none'
							});
						}
					},
					true
				);
			}
		}
	}
};
</script>

<style lang="less" scoped>
page {
	// background-color: #ffeefe; /* 页面背景色 */
}
.page {
	display: flex;
	flex-direction: column;
	box-sizing: bo rder-box;
	min-height: 100%;
	height: auto;
	// background-color: #ffeefe; /* 页面背景色 */
}
//item分割线
.item-line {
	height: 1px;
	width: 750rpx;
	transform: scaleY(0.3);
	background-color: rgba(0, 0, 0, 0.1);
	z-index: 999;
}
.curved_box {
	display: inline-block;
	display: inline;
	width: 540rpx;
	margin: 100rpx;
	height: auto;
	background-color: #fdf5e5;
	border: 1px solid #eee;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	position: relative;
	zoom: 1;
}

.curved_box:before {
	-webkit-transform: skew(-15deg) rotate(-6deg);
	-moz-transform: skew(-15deg) rotate(-6deg);
	transform: skew(-15deg) rotate(-6deg);
	left: 15px;
}
.curved_box:after {
	-webkit-transform: skew(15deg) rotate(6deg);
	-moz-transform: skew(15deg) rotate(6deg);
	transform: skew(15deg) rotate(6deg);
	right: 15px;
}

.curved_box:before,
.curved_box:after {
	width: 70%;
	height: 55%;
	content: ' ';

	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

	position: absolute;
	bottom: 10px;
	z-index: -1;
}
.img {
	width: 260rpx;
	height: 260rpx;
	border-radius: 90rpx;
	margin-top: 10rpx;
}
.login {
	.text-center {
		text-align: center;
	}
	.titleImg {
		height: 140rpx;
		width: 380rpx;
		margin-top: 60rpx;
	}
	.form {
		padding: 60rpx;
		display: block;
		.formItem {
			box-sizing: border-box;
			width: 100%;
			height: 112rpx;

			font-size: 36rpx;
			padding: 32rpx;
			margin: 20rpx 0;
			border-radius: 56rpx;
			&.submit {
				color: #000000;
				text-align: center;
				font-size: 40rpx;
				line-height: 40rpx;
			}
		}
	}
}
</style>
